<!--
 * @description: 地图组件
 * @Date: 2023-04-21 10:08:01
 * @example: 
 * @params: 
-->
<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";


const emits = defineEmits(['UpdateLocation'])

const mapContainer = ref(null);
let map = null;
const InitMapboxfn = () => {
    mapboxgl.accessToken =
    "pk.eyJ1IjoiaGthZ2xqcSIsImEiOiJjazd6dDl4OWIwOWVsM21td3hqb3Q5aGxtIn0.IWC0fVRghs_jT5YAA_tKkw";
  // 创建地图实例
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: "mapbox://styles/hinchan/cl6bva41q000s14qpdvwc4uyk",
    center: [114.170552, 22.297739],
    zoom: 12,
    pitch: 60,
    bearing: 0 // 初始旋转角度为0
  });

    /** 标记点Mark */
    const marker = new mapboxgl.Marker({
    draggable: false,
    color: "orange",
  });
  /** 地图右侧搜索框 */
  const geocoder = new MapboxGeocoder({
    // Initialize the geocoder
    accessToken:
      "pk.eyJ1IjoiaGthZ2xqcSIsImEiOiJjazd6dDl4OWIwOWVsM21td3hqb3Q5aGxtIn0.IWC0fVRghs_jT5YAA_tKkw", // Set the access token
    mapboxgl: mapboxgl, // Set the mapbox-gl instance
    marker: true, // Do not use the default marker style
    limit: 10,
  });
  /** MapboxGeocoder搜索结束获取坐标 */
  geocoder.on("result", (e) => {
    geocoder.clear();
        // console.log(e);
        const address = e.result.place_name;
        const lng = e.result.center[0];
        const lat = e.result.center[1];
        console.log("MapboxGeocoder搜索结束获取坐标",lng,lat)
        emits('UpdateLocation',{address,lng,lat})
        marker.setLngLat(e.result.center);
        marker.addTo(map);
      });
// Add geolocation control to the map
map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}));

// // Get the user's location when the geolocate control is clicked
// map.on('geolocate', function(e) {
//     console.log('Longitude: ' + e.coords.longitude);
//     console.log('Latitude: ' + e.coords.latitude);
// });

// Set geolocation enabled to true
// map.geolocateControl.setGeolocateEnabled(true);
  /** 点击获取坐标点或地址 */
  map.on("click", (e) => {
    //   this.$Message.destroy();
    const features = map.queryRenderedFeatures(e.point);
    if (features.length === 0) {
      ElMessage.error("Not available");
      return;
    }
    let address = "";
    const { lng } = e.lngLat;
    const { lat } = e.lngLat;
    if (Object.keys(features[0].properties).includes("name")) {
      address = features[0].properties.name;
    } else {
      address = `[ ${lng}, ${lat} ]`;
    }
    emits('UpdateLocation',{address,lng,lat})
    marker.setLngLat(e.lngLat);
    marker.addTo(map);
  });



}
onMounted(() => {
    InitMapboxfn();
    setTimeout(() => {
        map.resize();
      }, 100);
});



</script>
<style lang="less">
.map-container {
  width: 100%;
  height: 100%;
}
</style>
